<template>
  <div>
<!--搜索框-->
<div>
  <el-form>
  <el-row>
    <el-col :span="6">
        <el-form-item label="员工信息">
      <el-input v-model="filters.e_name"  placeholder="请输入姓名或联系方式"></el-input>
    </el-form-item>
    </el-col>
    <el-col :span="6">
        <el-form-item label="所属部门">
      <el-input v-model="filters.department_id"  placeholder="请输入姓名或联系方式"></el-input>
    </el-form-item>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="12">
      <el-button type="primary" @click="initData">搜索</el-button>
      <el-button type="primary" @click="reset">重置</el-button>
    </el-col>
  </el-row>
  </el-form>
</div>


    <!--功能按钮-->
    <div style="text-align: right">
      <el-button type="primary" @click="handleAdd">添加</el-button>
    </div>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        type="index"
        label="行号"
        width="80"
        header-align="center"
        align="center"
      />
      <el-table-column prop="e_name" label="姓名" width="180" />
      <el-table-column prop="contact_info" label="联系方式" width="120" />
      <el-table-column prop="department_id" label="所属部门" width="120" />
      <el-table-column prop="position" label="职务" width="120" />
      <el-table-column prop="account" label="账号" width="120" />
      <el-table-column prop="type" label="类型" width="120" />
      <el-table-column prop="annual_target" label="年度业绩" width="120" />
      <el-table-column
        prop="completed_performance"
        label="已完成业绩"
        width="120"
      />
      <el-table-column prop="completion_rate" label="完成率" width="120" />
      <el-table-column
        prop="account_status"
        label="账号状态（开启/关闭）"
        width="120"
      />

      <el-table-column label="操作" width="200" align="center">
        <template v-slot="{ row }">
          <el-button type="primary" title="重置密码">重置密码</el-button>
          <el-button
            type="primary"
            :icon="Edit"
            circle
            title="编辑"
            @click="update(row.employee_id)"
          />

          <el-button 
          type="primary" 
          :icon="Delete" 
          circle title="删除"
          @click="del(row.employee_id)" />
        </template>

      </el-table-column>
    </el-table>
    <!--分页-->
    <div
      style="
        background-color: azure;
        height: 50px;
        line-height: 50px;
        text-align: right;
      "
    >
      <el-pagination
        background
        :page-size="pageSize"
        layout="total,sizes,prev, pager, next,jumper"
        :total="total"
        @size-change="chgsize"
        @current-change="chgpg"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
//引入api接口
import { queryEmployess } from "@/api/employess.js";
//引入图标
import { Delete, Edit } from "@element-plus/icons-vue";
//引入路由
import { useRouter } from "vue-router";
import { el } from "element-plus/es/locale/index.mjs";

import { ElMessage, ElMessageBox } from 'element-plus'

//过滤条件
const filters = ref({
  e_name: "",
  department_id: ""
});
//重置
function reset() {
  filters.value = {
    e_name: "",
    department_id: ""
  };
  initData();
}

//表单数据
const tableData = ref([{ e_name: "张三" }]);

//路由实例
const router = useRouter();
//添加客户
function handleAdd() {
  router.push("/employess/add");
}
//分页信息
const page = ref(1); //当前页 默认第1页
const pageSize = ref(10); //每页记录数
const total = ref(0); //总记录数
//每页记录数变化
function chgsize(size) {
  //更改每页记录数
  pageSize.value = size;
  //从每页开始查询
  page.value = 1;
  //查询数据
  initData();
}
//编辑
function update(employee_id) {
  //console.log("编辑", employee_id)
 router.push({ path: "/employess/update", query: { employee_id } });
}

//删除
function del(employee_id) {
 ElMessageBox.confirm(
    '你确定要删除吗?',
    'Warning',
    {
      confirmButtonText: '是',
      cancelButtonText: '否',
      type: 'warning',
    }
  )
    .then(() => {
      //确定后删除
      let data = {
        employee_id: employee_id
      };
      queryEmployess(data).then(res => {
        if (res.code == 200) {
          ElMessage.success("删除成功");
          initData();
        } else {
          ElMessage.error("删除失败");
        }
      });
    })
    .catch(() => {
      
    })
    
    
}

//当前页变化
function chgpg(pg) {
  page.value = pg;
  initData();
}
//查询数据
async function initData() {
  //请求
  let data = {
    page: page.value,
    pageSize: pageSize.value,
    e_name: filters.value.e_name,
    department_id: filters.value.department_id
  };
  let res = await queryEmployess(data);
  if (res.code == 200) {
    tableData.value = res.data.data;
    //接收分页信息
    page.value = res.data.page;
    pageSize.value = res.data.pageSize;
    total.value = res.data.total;
  }
  console.log("res.>", res);
}

//生命周期函数
onMounted(() => {
  initData();
});
</script>

<style scoped></style>
